<template>
  <view class="my-wrap">
		<button class="school-img" @click.stop="handleSchool">
			<image src="/static/images/my/school.png"></image>
		</button>
		<view class="info-wrap">
			<view class="click-login">
				<image class="bgc" src="/static/images/my/bg.png"></image>
				<view v-if="false" class="login-wrap">
					<view class="image-wrap">
						<image :src="desc"></image>
					</view>
					<view class="login-desc">点击登录</view>
				</view>
				<view class="logined">
					<image class="icon " :src="info.userPhoto ? info.userPhoto:desc" @click="handleChangeClick(0)"></image>
					<view class="info">
						<view class="name">{{info.userName}}</view>
						<view class="school">{{info.schoolName}}</view>
						<view class="class-num">{{info.className}}</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) of list" :key="index" @click="handleDetail(item)">
					<image class="icon" :src="item.icon"></image>
					<view class="desc">{{item.desc}}</view>
					<view class="right">
						<view v-if="index === 2" class="cache">{{currentSize}}</view>
						<image class="arrow" src="/static/images/my/more.png"></image>
					</view>
				</view>
			</view>
			<view class="button-wrap">
				<common-button :btn-title="btnTitle" @submit="handleLogout"></common-button>
			</view>
			<tailor :file="file"></tailor>
		</view>
		<view class="tailor-wrap">
			<avatar @upload="uploadImg" ref="avatar"></avatar>
		</view>
	</view>
</template>

<script>
import commonButton from '../button/index'
import avatar from "../yq-avatar/yq-avatar.vue";
import base from '../../api/base'
import {changeAvatar} from '../../api/home'
export default {
	name: 'my',
	components:{
		commonButton,
		avatar
	},
	props: {
		pullDown: {
			type:String,
			default: ''
		}
	},
	data() {
		return {
			btnTitle: '退出登录',
			currentSize: 0,
			info: {},
			desc: '/static/images/analyze/def_user.png',
			list: [
				{
					icon: '/static/images/my/password.png',
					desc: '修改密码',
					path: '/pages/password/index'
				},
				{
					icon: '/static/images/my/feedback.png',
					desc: '帮助与反馈',
					path: '/pages/feedback/index'
				},
				{
					icon: '/static/images/my/brush.png',
					desc: '清楚缓存'
				},
				{
					icon: '/static/images/my/logo.png',
					desc: '关于我们',
					path: '/pages/about/index'
				}
			],
			file: ''
		}
	},
	watch: {
		pullDown:{
			handler: 'pullDownRefresh'
		}
	},
	created() {
		this.initInfo()
	},
	methods: {
		handleClickBgc() {
			console.log(111)
		},
		// 校友录
		handleSchool(e) {
			uni.navigateTo({
				url:'/pages/schoolfellow/index'
			})
		},
		//刷新
		pullDownRefresh(val) {
			if (val === 'my') {
				this.initInfo()
				this.$emit('update:pullDown','')
			}
		},
		handleDetail(item) {
			const _this = this
			if(!item.path) {
				uni.showLoading({
					title: '清除中'
				})
				plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {  
						entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录
						}, function(e) {})
						setTimeout(function() {
							_this.showCache()
								uni.showToast({
									title: '清除成功'
								})
						}, 500);  
				}, function(e) {})
				return
			} else {
				uni.navigateTo({
					url: item.path,
					animationType: 'pop-in'
				})
			}
		},
		handleLogout() {
			const _this = this
			uni.removeStorageSync('USER_INFO')
			uni.removeStorageSync('TOKEN')
			uni.showToast({
				title: '退出登录成功',
				success() {
					uni.redirectTo({
						url: '/pages/login-launch/index'
					})
				}
			})
		},
		// 初始化信息
		initInfo() {
			const _this = this
			// plus.cache.calculate(function(res) {
			// 	const sizeCache =  parseFloat(res / (1024 * 1024)).toFixed(2) + 'M'
			// 	_this.currentSize = sizeCache
			// })
			this.showCache()
			const info = uni.getStorageSync('USER_INFO')
			this.info = JSON.parse(info)
		},
		// 计算缓存
		showCache() {
				const _this = this
				plus.io.resolveLocalFileSystemURL('_doc/', function(entry) { //通过URL参数获取目录对象或文件对象  
						var fileSize = 0;  
						var directoryReader = entry.createReader();  
						directoryReader.readEntries(function(entries) {   //获取当前目录中的所有文件和子目录  
								for(var i = 0; i < entries.length; i++) {  
										if(entries[i].isFile) {  
												entries[i].file(function(file) {  
														fileSize += (file.size * 0.0009766);  
												}, function(e) {  
														// mui.toast(e.message);  
												});  
										} else {  
												entries[i].getMetadata(function(metadata) {  
														fileSize += (metadata.size * 0.0009766); //1字节=0.0009766kb  
												}, function() {  
														// mui.toast(e.message);  
												});  
										}  
								}  
						}, function(e) {  
								// mui.toast('文件读取失败');  
						});  
						setTimeout(function() {
							_this.currentSize = parseFloat(fileSize / (1024)).toFixed(2) + 'M'
						}, 500);  
				}, function(e) {  
						// mui.toast('文件路径读取失败');  
				});  
		},
		// 选择图片
		handleChangeClick(index) {
			this.$refs.avatar.fChooseImg(index,{
				selWidth: "200upx", selHeight: "200upx",
				expWidth: '120upx', expHeight: '120upx'
			});
		},
		//上传
		uploadImg(res) {
			const _this = this
			const userInfo = uni.getStorageSync('USER_INFO')
			uni.uploadFile({
					url: `${base.url}/tool/stu_par_upload`, //仅为示例，非真实的接口地址
					filePath: res.path,
					name: 'file',
					header: {
						'Auth-id': JSON.parse(userInfo).authId,
						'Auth-token': JSON.parse(userInfo).authToken,
					},
					async success(uploadFileRes){
						const path = JSON.parse(uploadFileRes.data).data
						uni.showLoading({
							title: '上传中'
						})
						const res = await changeAvatar({userHead: path})
						
						uni.showLoading({
							title: '上传成功'
						})
						_this.$set(_this.info, 'userPhoto', res)
						uni.hideLoading()
						const newUserInfo = JSON.parse(userInfo)
						newUserInfo.userPhoto = res
						uni.setStorageSync('USER_INFO', JSON.stringify(newUserInfo))
					}
			});
		}
	}
}

</script>
<style lang='scss' scoped>
	.my-wrap{
		width: 100%;
		height: 100vh;
		background: #f0f0f0;
		padding: 226upx 20upx 0;
		box-sizing: border-box;
		position: relative;
		.info-wrap{
			width: 100%;
			height: calc(100% - 218upx);
			background:rgba(255,255,255,1);
			border-radius:10upx;
			padding-top: 218upx;
			position: relative;
			.click-login{
				position: absolute;
				top: -142upx;
				left: 50%;
				transform: translateX(-50%);
				width:672upx;
				height:360upx;
				border-radius:22upx;
				.bgc{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
				.logined{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					padding: 40upx;
					box-sizing: border-box;
					display: flex;
					z-index: 10;
					.icon{
						width: 120upx;
						height: 120upx;
						border-radius: 50%;
						margin-right: 20upx;
					}
					.info{
						flex: 1;
						min-width: 0;
						color: #fff;
						.name {
							font-size: 38upx;
							line-height: 120upx;
							color: #fff;
						}
						.class-num,.school {
							font-size: 38upx;
							line-height: 60upx;
							color: #fff;
							white-space: nowrap;
							width: 100%;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
				}
				.login-wrap{
					position: absolute;
					top:50upx;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{
						width:120upx;
						height:120upx;
						border-radius:50%;
					}
					.login-desc{
						font-size: 42upx;
						line-height: 82upx;
						font-weight:500;
						color: #fff;
					}
				}
			}
			.list{
				width: 100%;
				padding-left: 20upx;
				box-sizing: border-box;
				overflow: hidden;
				margin-bottom: 40upx;
				.item{
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-right:30upx;
					box-sizing: border-box;
					border-bottom: 1px solid #E1E1E1;
					height: 122upx;
					align-items: center;
					.icon{
						width: 60upx;
						height: 60upx;
						margin-right: 20upx;
					}
					.desc{
						flex: 1;
						font-size:30upx;
						color: #333;
					}
					.right{
						height: 100%;
						display: flex;
						align-items: center;
						.arrow{
							width: 40upx;
							height:40upx;
							
						}
						.cache{
							font-size:30upx;
							color: #999;
							font-weight: 500;
							margin-right: 40upx;
						}
					}
					
				}
			}
		}
	}
	.button-wrap{
		width: 100%;
		padding: 20upx;
		box-sizing: border-box;
	}
	.tailor-wrap{
		position: absolute;
		z-index: 999;
		width: 100%;
		height: 0;
		background-color: #fff;
		left: 0;
		top: 0;
	}
	.school-img{
		position: fixed;
		top: 105upx;
		right: 60upx;
		border:2upx solid rgba(145,239,238,1);
		background-color: transparent;
		border-radius:10upx;
		z-index: 1000;
		padding: 0;
		width:136upx;
		height:50upx;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width:126upx;
			height:42upx;
		}
	}
</style>